<template>
	<div style="height: 100%" ref="bottom_main" :data-height="bottom_height">
		<!--上面-->
		<div class="topFrist" ref="topFrist">
			<ul class="ul_left">
				<li class="current">最近学习记录</li>
				<li>学习计划</li>
			</ul>
			<ul class="ul_right">
				<li class="btnxieyi">签订协议</li>
				<li class="rjdh_btn" v-show="isRjdh">人机对话</li>
				<li class="btnzbj" v-show="isLiveSHow">直播间</li>
				<!--<li class="btnfzjx">仿真教学</li>-->
				<!--<li>考点梳理</li>-->
			</ul>
		</div>

		<!--下面-->
        <!--v-bind:style="{ height: bottom_height-50 > 605 ? bottom_height-50 + 'px' : '100%' }"-->
		<div class="fg" ref="mian_right" style="position:relative" v-bind:style="{height: bottom_height > 537 ? bottom_height-topnavHeight  + 'px' : '100%' }">
			<!--左侧-->
			<section class="reLearn" ref="reLearn">
				撒发顺丰十多个当三个的是个啥鬼
			</section>
			<!--右侧-->
			<section class="statistics" >
                <div class="right_pass">
                    <div class="row buy_contain">
                        <div class="buyCode">{{payBtnName}}</div>
                        <div class="tmail">天猫优惠</div>
                    </div>
                    <div class="setTime">设置考试时间</div>
                </div>
                <div>
                    <table>
                        <thead>
                            <tr>
                                <th colspan="3">统计分析</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="td1" rowspan="7">试题</td>
                                <td class="td4">总题量</td>
                                <td class="td6" id="spnTotalTestNum">{{ AnalysisTest.totalTestNum }} 题</td>
                            </tr>
                            <tr>
                                <td class="td4">已答</td>
                                <td class="td6" id="spnTestNum">{{ AnalysisTest.testNum }} 题</td>
                            </tr>
                            <tr>
                                <td class="td4">答对</td>
                                <td class="td6" id="spnRightTestNum">{{ AnalysisTest.testRightNum }} 题</td>
                            </tr>
                            <tr>
                                <td class="td4">答错</td>
                                <td><u class="pointer td6 redLine" id="spnWrongTestNum">{{ AnalysisTest.testErrorNum }} 题</u></td>
                            </tr>
                            <tr>
                                <td class="td4">笔记</td>
                                <td><u class="pointer td6 redLine" id="spnNoteNum">{{ AnalysisTest.noteNum }} 题</u></td>
                            </tr>
                            <tr>
                                <td class="td4">收藏</td>
                                <td><u class="pointer td6 redLine" id="spnFavNum">{{ AnalysisTest.favNum }} 题</u></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="statistics_exam" id="Anser">
                                        <ul>
                                            <li>
                                                <span class="statistics_tit">答题数</span>
                                                <div id="answerRate" class="statistics_bg">
                                                    <div class="statistics_ny" id="spnAnswerRateLength" v-bind:style="{width:AnalysisTest.answerRate}">
                                                        <div id="spnAnswerRate" class="progress_div" >{{ AnalysisTest.answerRate  }}</div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <span class="statistics_tit">正确率</span>
                                                <div id="accuracy" class="statistics_bg">
                                                    <div class="statistics_ny" id="spnAccuracyLength" v-bind:style="{width:AnalysisTest.accuracy}">
                                                        <div id="spnAccuracy" class="progress_div">{{ AnalysisTest.accuracy }}</div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="td1" rowspan="5">视频</td>
                                <td class="td4">总课时</td>
                                <td class="td6" id="">{{ AnalysisVideo.allVideo }} 小时</td>
                            </tr>
                            <tr>
                                <td class="td4">总数量</td>
                                <td class="td6">{{ AnalysisVideo.allVideoNum }} 个</td>
                            </tr>
                            <tr>
                                <td class="td4">已看课时</td>
                                <td class="td6">{{ AnalysisVideo.doneVideo }} 小时</td>
                            </tr><tr>
                                <td class="td4">已看数量</td>
                                <td class="td6"> {{ AnalysisVideo.doneVideoNum }} 个</td>
                            </tr><tr>
                                <td colspan="2">
                                    <div class="statistics_video" id="video">
                                        <ul>
                                            <li>
                                                <span class="statistics_tit">已看视频</span>
                                                <div class="statistics_bg">
                                                    <div class="statistics_ny" v-bind:style="{width:AnalysisVideo.accuracy}">
                                                        <div class="progress_div" >{{ AnalysisVideo.accuracy }}</div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

			</section>
            <!--底部公司介绍-->
            <footer>
                <div class="soft-edition" id="p_index">
                    &nbsp;全国免费热线：<span id="softTel">400-727-8800</span>&nbsp;&nbsp;客服QQ：<span id="softQQ" class="soft-editionSpan pointer">4007278800</span>&nbsp;&nbsp;©2005-2019
                    &nbsp;<span id="soft_buttom">广西英腾教育科技股份有限公司&nbsp;版权所有
        &nbsp;备案信息：<a href="http://www.miibeian.gov.cn/" target="_blank" class="softInfoHover">桂ICP备09009842号-4</a></span>
                </div>
            </footer>
		</div>
    </div>
</template>
<script>
    import { getCookie,getAppEName,getAppID } from "../../../config/mUtils";
    import {getAnalysisApiX,getCptStatisticsX,getVideoProgressX,getLiveClass,getDefaultSimulationManage} from "../../../config/getData";
	export default {
        props: ['bottom_height'],
        data: function() {
	        return {
                payBtnName:'充值购买',
                topnavHeight: window.innerHeight<721 ? 40 : 50,
                isLiveSHow:false,   //是否显示直播间
                isRjdh:false,   //是否显示人机对话
                AnalysisTest:'',
                AnalysisVideo:{
                    doneVideo :0,
                    allVideo : 0,
                    doneVideoNum : 0,
                    allVideoNum:0,
                    accuracy:0
                }

	        }
	    },
	    methods: {
	        customHidden(msg) {
	            // 改变协议隐藏变量值
	            this.isShowAgreen = msg;
	        },
	        changeShowSubMenu(index) {
	            // 显示隐藏登录 or 注册
                var _that = this;
                // if ((_that.showSubMenu && index === 0) || (!_that.showSubMenu && index === 1)) {
                //     return;
                // }
                // _that.showSubMenu = index === 1 ? false : true;
                // if (!_that.showSubMenu) {
                //     _that.$refs.regChild.parengtChange(_that.showSubMenu);
                // }
	        },
            showAnalysisApiX (){
	            let guid= localStorage.getItem('guid');
	            let appID = getAppID();
                getAnalysisApiX(guid,appID).then(res=>{
                    if(res.status===200){
                        // this.AnalysisTest = res.data.analysisResult.Result[0];
                        let result = res.data.analysisResult.Result[0];
                        if(result.testNum>result.totalTestNum){
                            result.testNum = result.totalTestNum;
                        }
                        if(result.testRightNum>result.totalTestNum){
                            result.testRightNum = result.totalTestNum;
                        }
                        if(result.testErrorNum>result.totalTestNum){
                            result.testErrorNum = result.totalTestNum;
                        }
                        this.AnalysisTest = result;
                        getCptStatisticsX(guid,appID).then(res=>{
                            if(res.status===200){
                                let testTongji = {
                                    'answerCount':0,
                                    'right':0,
                                    'wrong':0
                                }
                                let _arrData = res.data;
                                for(let i=0;i<_arrData.length;i++){
                                    testTongji.answerCount+=_arrData[i].testCount;
                                    testTongji.right+=_arrData[i].RightCount;
                                }
                                testTongji.wrong = testTongji.answerCount - testTongji.right;
                                this.AnalysisTest.testNum = testTongji.answerCount;
                                this.AnalysisTest.testRightNum = testTongji.right;
                                this.AnalysisTest.testErrorNum = testTongji.wrong;
                                this.AnalysisTest.answerRate = (this.AnalysisTest.totalTestNum && this.AnalysisTest.testNum) ? Math.round(this.AnalysisTest.testNum / this.AnalysisTest.totalTestNum * 10000) / 100.00 + '%' : '0%';
                                this.AnalysisTest.accuracy = (this.AnalysisTest.testRightNum && this.AnalysisTest.testNum) ? Math.round(this.AnalysisTest.testRightNum / this.AnalysisTest.testNum * 10000) / 100.00 + '%' : '0%';
                            }
                        })
                    }
                })

                getVideoProgressX(guid,appID).then(res=>{
                    if(res.status === 200){
                        let projsonData = res.data;
                        let progerssData = {
                            doneVideo:0,
                            allVideo:0,
                            doneVideoNum:0,
                            allVideoNum:0,
                            accuracy:0
                        }
                        progerssData.doneVideo = (projsonData.currentTotalVideoDuration/60/60).toFixed(1);
                        progerssData.allVideo = (projsonData.totalVideoDuration/60/60).toFixed(1);
                        progerssData.doneVideoNum = projsonData.currentTotalVideoCount;
                        progerssData.allVideoNum = projsonData.totalVideoCount;
                        progerssData.accuracy = (progerssData.doneVideo && progerssData.allVideo) ? Math.ceil((Number(progerssData.doneVideo) / Number(progerssData.allVideo))*100) +'%' :'%'
                        this.AnalysisVideo = progerssData;
                    }
                })
            },
            showLive(){
	            let _appEname = getAppEName();
                getLiveClass(_appEname).then(res=>{
                    if(res.status===200){
                        let jsonData = res.data;
                        if( (jsonData.onShow && jsonData.onShow.count >0) || (jsonData.endShow && jsonData.endShow.count >0) ){
                            this.isLiveSHow = true;
                        }
                    }
                })
            },
            showRjdh(){
                let _appEname = getAppEName();
                getDefaultSimulationManage(_appEname).then(res=>{
                    if(res.status===200){
                        this.isRjdh = res.data;

                    }
                })
            }
	    },
	    created: function() {

        },
	    mounted: function() {
            this.showLive();//直播间
            this.showAnalysisApiX();//统计

	    }
	}
</script>
<style lang="less">
    /*@import "./indexPage.less";*/
    @main_color:#5bb8ff;
    @white:#fff;
    @green_color:#66cc80;
    @yellow_color:#ffb73e;
    @red_color:#fc7a7e;
    @black:#000;
    @color_6:#666;
    @color_3:#333;
    @color_d:#ddd;

    .topFrist{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;

    }
    .ul_left{
        float: left;
        margin-left: 5px;
        li{
            font-size: 14px;
            float: left;
            margin: 10px;
            padding: 5px 10px;
        }
        .current{
            background: #F3F3F3;
            color: @main_color;
            border-radius: 4px;
        }
    }
    .ul_right{
        float: right;
        margin-right: 313px;
        margin-top: 9px;
        li{
            float: left;
            color:@white;
            text-indent:18px;
            border-radius: 5px;
            line-height: 30px;
            width:120px;
            height:30px;
            cursor:pointer;
            text-align: center;
            margin-left: 8px;
        }
        .btnxieyi{
            background:@main_color url(../../../images/xieyi.png) 15px center no-repeat;
        }
        .rjdh_btn{
            background:@yellow_color url(../../../images/duihua.png) 15px center no-repeat;
        }
        .btnzbj{
            background:@red_color url(../../../images/zhibo.png) 20px center no-repeat;
        }
        .btnfzjx{
            background:@green_color url(../../../images/jiaoxue.png) 15px center no-repeat;
        }
    }
    .reLearn{
        float: left;
    }
    .statistics{
        float: right;
        border-left: 1px solid #ddd;
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
        width: 313px;
        height: 100%;
        float: right;
        padding: 1.5em;
    }
    .buy_contain{
        overflow: hidden;
        div{
            float: left;
            height: 80px;
            line-height: 80px;
            color:@white;
            text-align: center;
            font-size:18px;
            border-radius: 5px;
            cursor: pointer;
            width: 48%;
            &:hover{
                opacity: 0.9;
            }
        }
    }
    .buyCode{
        background: @green_color ;
    }
    .tmail{
        background: @yellow_color;
        margin-left: 4%;
    }
    .setTime{
        width: 100%;
        line-height: 40px;
        font-size:18px;
        margin-top: 10px;
        background: @main_color;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        color: @white;
        &:hover{
            opacity: 0.9;
        }
    }
    table {
        border-collapse: collapse;
        text-align: center;
        width: 100%;
        th{
            line-height: 40px;
            color: @color_3;
        }
        td{
            border:1px solid @color_6;
            height: 30px;
            color: @color_6;
        }
        .td1{
            width: 20%;
        }
        .td4{
            width: 30%;
        }
        .td6{
            width: 50%;
        }
    }
    .statistics_exam ,.statistics_video{
        float: left;
        width: 100%;
        ul{
            padding: 5px 0;
            overflow: hidden;
        }
        li{
            float: left;
            width: 100%;
            &:first-child{
                margin-bottom: 5px;
            }
        }
        .statistics_tit{
            float: left;
            width: 55px;
            line-height: 16px;
        }
        .statistics_bg{
            float:left;
            height:15px;

            text-align:center;
            border:1px solid @color_d;
            font-size:10px;
            box-sizing:border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
        }
        .progress_div{
            width:167px;
            line-height: 13px;
        }
        .statistics_ny{
            height: 13px;
            background: @green_color;
        }
    }
    .statistics_video{
        li:first-child{
            &{
                margin-bottom: 0px;
            }
        }
    }
    footer{
        position: absolute;
        bottom: 0;
        left:0px;
        right:0px;
        bottom:0px;
    }
    .soft-edition{
        text-align: center;
        color:#818588;
        background-color:#fff;
        font-size:12px;
        border-top:1px solid #ddd;
        padding:4px;
        .soft-editionSpan{
            text-align: center;

            color:#818588;
            background-color:#fff;
            padding:4px;
            font-size:12px;
            border-top:1px solid #ddd;
            &:hover{
                color: #00A0E9;
            }
        }
        a{
            color:#818588;
        }
    }
    @media screen and (max-height: 720px){
        .topFrist{
            height: 40px;
        }
        .ul_left{
            li{
                margin: 8px;
                padding: 2px 10px;
            }
        }
        .ul_right{
            margin-top: 8px;
            li{
                line-height: 24px;
                width:100px;
                height:24px;
                font-size: 14px;
            }
            .btnxieyi{
                background:@main_color url(../../../images/xieyi.png) 12px center no-repeat;
                background-size:auto 60%;
            }
            .rjdh_btn{
                background:@yellow_color url(../../../images/duihua.png) 12px center no-repeat;
                background-size:auto 60%;
            }
            .btnzbj{
                background:@red_color url(../../../images/zhibo.png) 18px center no-repeat;
                background-size:auto 60%;
            }
            .btnfzjx{
                background:@green_color url(../../../images/jiaoxue.png) 12px center no-repeat;
                background-size:auto 60%;
            }
        }
        .statistics{
            width: 280px;
            padding: 1em;
        }
        .buy_contain{
            div{
                height: 70px;
                line-height: 70px;
            }
        }
        .setTime{
            line-height: 40px;
            margin-top: 10px;
        }
        table {
            th{
                line-height: 30px;
            }
            td{
                font-size: 12px;
                height: 20px;
            }
        }
        .statistics_exam ,.statistics_video{
            .progress_div{
                width: 134px;
            }
        }
    }
</style>
